<template>
	<view>
		<!-- 头部导航 -->
		<view class="nav_top">
			<view class="nt_top">
				<view class="ntt_text"><text>3.50</text></view>
				<view class="ntt_stext">业绩比较基准</view>
			</view>
			<view class="nt_bottom">
				<view class="ntb_left">
					<text class="ntb_text">28</text>
					<view class="ntb_stext"><text  >产品期限（天）</text></view>
				</view>
				<view class="ntb_right">
					<text class="ntb_text">50000</text>
					<view class="ntb_stext"><text >起购价格</text></view>
				</view>
			</view>
		</view>
		
		<!-- 投资周期 -->
		<view class="invest">
			<view class="i_put">
				<text class="ip_text">投资周期</text>
			</view>
			<view class="i_all">
				<view class="i_step">
					<template>
							<uni-steps :options="stepData" :active="0" active-color='#3476f1'>
							</uni-steps>
					</template>
				</view>
				<view class="i_say">
					<view class="is_left"><text >购买说明</text></view>
					<view class="is_right">
						<text>
							每28天为一期试试啊沙河口哈萨克就会卡死啊啊课程卡车AC卡卡号块级是陈卡很快就啊陈
						</text>
					</view>
					
				</view>
			</view>
		</view>
		
		<!-- 安全保障 -->
		<view class="safe">
			<view class="s_put">
				<text class="sp_text">安全保障</text>
			</view>
			<view class="stext_top">
				<view class="sttt_top">
					<view v-for="item in safeData" :key='item.id'>
						<image :src="item.src" style="width: 94rpx;height: 94rpx;"></image>
						<view class="stt_text"><text>{{item.text}}</text></view>
					</view>
				</view>
				<view class="stext_bottom">
					<view class="sb_text">
						<text >该产品属于债券型资产管产品，风险较低</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 交易规则 -->
		<view class="rule">
			<view class="rule_nav" @tap='change(item.id)'  :class=" payCurret==item.id ? 'rule_active' :'' " v-for="item in payData" :key='item.id'>{{item.text}}</view>
		</view>
		
		<!-- 切换 -->
		<swiper class="swiper-item" :current=payCurret @change='EventHandle'>
			<!-- 交易规则 -->
			<swiper-item >
				<scroll-view scroll-y="true" style="height: 1320rpx;">
					<view class="swiper_one">
						<!-- 购买与领取 -->
						
						<view class="pay">
							<view class="pay_title"><text>购买与领取</text></view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>购买金额</text></view>
								<view class='pt_text'><text>50000元起购</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>领取金额</text></view>
								<view class='pt_text'><text>50000元起购老师看见看见as 就算了科技洛杉矶数据库垃圾</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>到账说明</text></view>
								<view class='pt_text'><text>50000试试看机会很少见客户是空号数据库和看元起购</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>开放日</text></view>
								<view class='pt_text'><text>50000数据库垃圾数量是磷酸氯喹随机数蓝思科技上课了上课了就算了口水鸡 授课老师就流口水</text></view>
							</view>
						</view>
						
						<!-- 收益与费用 -->
						<view class="pay">
							<view class="pay_title"><text>收益与费用</text></view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>收益规则</text></view>
								<view class='pt_text'><text>拉开了记录个哈伦裤手拉手算了算了抗裂砂浆力扣流口水离开授课老师累死了</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>费用规则</text></view>
								<view class='pt_text'><text>50000元起购老师看见看见as 就算了科技洛杉矶数据库垃圾</text></view>
							</view>
						</view>
						
						<!-- 支持银行列表 -->
						<view class="list">
							<view class="pay_title"><text>支持银行列表</text></view>
							<view style="margin-top: 30rpx;width: 650rpx;margin: 20rpx 26rpx;">
								<uni-table border stripe >
								    <!-- 表头行 -->
								    <uni-tr >
								        <uni-th align="center" width="210rpx">银行列表</uni-th>
								        <uni-th align="center" width="210rpx">单笔限额（元）</uni-th>
								        <uni-th align="center" width="210rpx">单日限额（元）</uni-th>
								    </uni-tr>
								    <!-- 表格数据行 -->
								    <uni-tr v-for="item in paymentData" :key='item.id'>
								        <uni-td align="center">
											<image :src="item.src" style="width: 30rpx;height: 30rpx;vertical-align: middle;"></image>
											<text style="margin-left:20rpx;vertical-align: middle ;">{{item.name}}</text>
										</uni-td>
								        <uni-td align="center">{{item.textone}}</uni-td>
								        <uni-td align="center">{{item.texttow}}</uni-td>
								    </uni-tr>
								</uni-table>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 信息披露 -->
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 1320rpx;">
					<view>
						<!-- 收益与费用 -->
						<!-- 基本信息 -->
						<view class="pay">
							<view class="pay_title"><text>基本信息</text></view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>产品类型</text></view>
								<view class='pt_text'><text>拉开了记录个哈伦裤手拉手算了算了抗裂砂浆力扣流口水离开授课老师累死了</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>产品名称</text></view>
								<view class='pt_text'><text>50000元起购老师看见看见as 就算了科技洛杉矶数据库垃圾</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>成立日期</text></view>
								<view class='pt_text'><text>拉开了记录个哈伦裤手拉手算了算了抗裂砂浆力扣流口水离开授课老师累死了</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>管理人</text></view>
								<view class='pt_text'><text>50000元起购老师看见看见as 就算了科技洛杉矶数据库垃圾</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>托管人</text></view>
								<view class='pt_text'><text>拉开了记录个哈伦裤手拉手算了算了抗裂砂浆力扣流口水离开授课老师累死了</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>投资范围</text></view>
								<view class='pt_text'><text>50000元起购老师看见看见as 就算了科技洛杉矶数据库垃圾</text></view>
							</view>
							<view class="pay_text">
								<view style="width: 104rpx;margin-top: 30rpx;"><text>基金经理</text></view>
								<view class='pt_text'><text>50000元起购老师看见看见as 就算了科技洛杉矶数据库垃圾</text></view>
							</view>
						</view>
						
						<!-- 查看协议 -->
						<view class="agreement">
							<view class="arg_title"><text>查看协议</text></view>
							<view class="arg_text" v-for="item in agreementData" :key='item.id'>
								<view style="margin: 30rpx 0;"><text>{{item.text}}</text></view>
								<view style="margin: 30rpx 0;color: #999999;"><text>〉</text></view>
							</view>
						</view>
						
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 常见问题 -->
			<swiper-item>
				<view class="question">
					<view v-for="item in questionData" :key='item.id'class="qustext">
						<view class="ask">
							<text>{{item.ask}}</text>
						</view>
						<view class="answer">
							<view style="margin: 20rpx 10rpx;">
								<text >
									{{item.answer}}
								</text>
							</view>
							
						</view>
					</view>
					
				</view>
			</swiper-item>
		</swiper>
		<!-- 底部按钮 -->
		<view class="bottom_btn">
			<view class="bb_text">
				<view class="bbt_img" @tap='open'>
					<image src="../../static/particulars/comp.png" style="width: 36rpx;height: 42rpx;"></image>
				</view>
				<navigator url="/pages/purchase/purchase">
					<view class="btn_style">
						<text>立即购买</text>
					</view>
				</navigator>
				
			</view>
		</view>
		
		<!-- 弹出层 -->
		<uni-popup ref="popup">
			<view class="computed">
				<view class="com_top">
					<text></text>
					<text>收益计算器</text>
					<text @tap="close">x</text>
				</view>
				<view class="com_frist">
					<text>投资金额（元）</text>
				</view>
				<view class="com_second"><input type="text" @input="Costs" v-model="Cost" value="" /></view>
				<view class="com_third">
					<text>据业绩比较基准28天后可赚</text>
				</view>
				<view class="com_forth"><input type="text" v-model="Earnings" value="26.85" /></view>
				<view class="com_fifth" @tap='close'><text>返回</text></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Cost:10000, //成本
				Earnings:26.85,//收益
				stepData:[
					{title: '购买',desc:'2018-11-11'}, 
					{title: '计算收益',desc:'2018-11-11'}, 
					{title: '发放收益',desc:'2018-11-11'}, 
					{title: '到账',desc:'两个交易日到账'},
					],
				safeData:[
					{id:1,text:"知名金融机构",src:"../../static/particulars/home.png"},
					{id:2,text:"精选优质品质",src:'../../static/particulars/search.png'},
					{id:3,text:"监管机构备案",src:'../../static/particulars/safe.png'}
				],
				payData:[
					{id:0,text:'交易规则'},
					{id:1,text:'信息披露'},
					{id:2,text:'常见问题'}
				],
				payCurret:0,
				paymentData:[
					{id:1,src:'../../static/particulars/gong.png',textone:'5万',texttow:"5万",name:'工行'},
					{id:2,src:'../../static/particulars/nong.png',textone:'5000',texttow:"5000",name:'农行'},
					{id:3,src:'../../static/particulars/zhong.png',textone:'20万',texttow:"20万",name:'中行'},
					{id:4,src:'../../static/particulars/jian.png',textone:'10万',texttow:"10万",name:'建行'},
					{id:5,src:'../../static/particulars/jiao.png',textone:'10万',texttow:"10万",name:'交行'},
					{id:6,src:'../../static/particulars/zhao.png',textone:'5000',texttow:"5000",name:'招行'},
					{id:7,src:'../../static/particulars/guang.png',textone:'200万',texttow:"200万",name:'广发'},
					{id:8,src:'../../static/particulars/ping.png',textone:'5万',texttow:"5万",name:'平安'}
				],
				agreementData:[
					{id:1,text:'《管理合同》'},
					{id:2,text:'《说明书》'},
					{id:3,text:'《风险揭示书》'},
					{id:4,text:'《电子签名约定书》'},
					{id:5,text:'《服务协议及权益通知》'}
				],
				questionData:[
					{id:1,ask:'什么是券商资管产品？',answer:'券商资管是-款由证券公司或其资管子公司出品的资产管理计划，由具备资质的证券公司发行并管理，受证监会监管,投资品种涵盖了证券交易所和银行间市场的资产;具有集合理财，专业管理,组合投资，分散风险的特点。'},
					{id:2,ask:'什么是开放日？',answer:'资管产品按周期运作，-般在约定开放日的10点~15点，向投资人开放购买/领取;其余时间均封闭运作。若约定的开放日为非交易日，资管公司可能提前开放或顺延，具体以资管公司的公告为准。'},
					{id:3,ask:'什么时候产生收益？收益什么时候发放',answer:'该产品预计于购买的下个交易日(T+1日)，或产品详情页中载明的日期开始计算收益;每期到期后自动发放收益，收益按当期实际计息天数结算,具体以各产品信息展示为准。'}
				]
			}
		},
		methods: {
			change(value){
				this.payCurret=value
			},
			EventHandle(event){
				this.payCurret=event.detail.current
			},
			open(){
			    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			    this.$refs.popup.open('bottom')
			},
			close() {
			    this.$refs.popup.close()
			},
			
			// 收益
			// Costs(){
			// 	this.Earnings = ((this.Earnings/this.Earnings)-1)
			// }
		}
	}
</script>

<style scoped>
	/* 计算器 */
	.com_frist{
		margin: 7rpx 40rpx;
	}
	.com_second{
		margin: 0 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: 2rpx solid #ccc;
		background-color: #ffffff;
		font-size: 28rpx;
		color: #333333;
		padding-top: 10rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.com_third{
		margin: 20rpx 40rpx;
		
	}
	.com_forth{
		margin: 7rpx 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: 2rpx solid #ccc;
		background-color: #ffffff;
		color: #f85656;
		padding-top: 10rpx;
		font-size: 28rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.com_fifth{
		width: 700rpx;
		margin-top: 40rpx;
		background-color: #e1e1e1;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		color: #333333;
		font-size: 28rpx;
	}
	.com_top{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		margin: 40rpx 20rpx;
		font-size: 40rpx;
		color: #333333;
	}
	.computed{
		width: 700rpx;
		height: 510rpx;
		margin: 0 25rpx;
		margin-bottom: 50rpx;
		border: 1rpx solid #ccc;
		background-color: #f3f3f3;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}
	/* 常见问题 */
	.ask{
		padding: 0 30rpx;
		height: 86rpx;
		margin-right: 20rpx;
		text-align: center;
		line-height: 86rpx;
		background-color: #3476f1;
		margin-top: 20rpx;
		border-radius: 12rpx;
		color: #ffffff;
		font-size: 28rpx;
		
	}
	.answer{
		width: 654rpx;
		background-color: #ffffff;
		height:280rpx ;
		border-radius: 12rpx;
		border: 2rpx solid #ccc;
		margin: 20rpx 20rpx;
		font-size: 28rpx;
		color: #666666;
		line-height: 50rpx;
	}
	.qustext{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	.question{
		width: 702rpx;
		margin: 0 24rpx;
		margin-top: 40rpx;
		border: 2rpx solid #ccc;
		box-shadow: 0 0 2rpx 2rpx #cccccc;
		border-radius: 10rpx;
		
	}
	/* 信息披露 */
	.arg_text{
		width: 650rpx;
		margin: 20rpx 26rpx;
		font-size: 24rpx;
		color: #333333;
		border-top: 2rpx solid #cccccc;
		display: flex;
		justify-content: space-between;
	}
	.arg_title{
		font-size: 28rpx;
		color: #999999;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.agreement{
		width: 702rpx;
		margin: 0 24rpx;
		margin-top: 40rpx;
		border: 2rpx solid #ccc;
		box-shadow: 0 0 2rpx 2rpx #cccccc;
		border-radius: 10rpx;
	}
	
	/* 底部按钮 */
	.bottom_btn{
		height: 210rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: #fefefe;
		
	}
	.bbt_img{
		width: 110rpx;
		height: 90rpx;
		line-height: 110rpx;
		text-align: center;
	}
	.btn_style{
		width: 640rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		background-color: #3476f1;
	}
	.bb_text{
		display: flex;
		margin-top:40rpx ;
	}
	/* 购买与领取 */
	.swiper-item{
		height: 1550rpx;
		
	}
	.pt_text{
		width: 490rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #333333;
	}
	.pay_text{
		width: 650rpx;
		margin: 20rpx 26rpx;
		font-size: 24rpx;
		color: #999999;
		border-top: 2rpx solid #cccccc;
		display: flex;
		justify-content: space-between;
		
	}
	.pay,.list{
		width: 702rpx;
		margin: 0 24rpx;
		margin-top: 40rpx;
		border: 2rpx solid #ccc;
		box-shadow: 0 0 2rpx 2rpx #cccccc;
		border-radius: 10rpx;
	}
	.pay_title{
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	/*交易规则*/
	.rule{
		margin-top: 30rpx;
		display: flex;
		margin-left: 30rpx;
	}
	.rule_nav{
		margin-right: 60rpx;
		font-size:24rpx ;
		color: #999999;
	}
	.rule_active{
		font-size: 32rpx;
		padding-bottom: 10rpx;
		color: #3476f1;
		font-weight: bold;
		border-bottom: 10rpx solid #3476f1;
	}
	/* 头部导航 */
	.nav_top{
		background-image: url(../../static/particulars/top_bc.png);
		height: 360rpx;
		background-size: cover;
		text-align: center;
		overflow: hidden;
	}
	.ntt_text{
		margin-top: 50rpx;
		font-size: 60rpx;
		color: #ffffff;
		font-weight: bold;
	}
	.ntt_stext{
		font-size: 24rpx;
		color: #ffffff;
		margin-top: 30rpx;
	}
	.nt_bottom{
		width: 550rpx;
		margin-left: 100rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.ntb_text{
		font-size: 40rpx;
		color: #ffffff;
		font-weight: bold;
	}
	.ntb_stext{
		font-size: 24rpx;
		color: #ffffff;
		margin-top: 10rpx;
		text-align: center;
	}

	/* 投资周期 */
	.invest{
		border-top: 2rpx solid #cccccc;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: -30rpx;
		background-color: #ffffff;
	}
	.ip_text,.sp_text{
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 24rpx;
		border-left: 10rpx solid #3476f1;
		padding-left: 10rpx;
	}
	.i_put{
		margin-top:44rpx ;
	}
	.i_all{
		text-align: center;
		width: 702rpx;
		margin:0 24rpx ;
		border: 2rpx solid #cccccc;
		margin-top: 30rpx;
		box-shadow: 0 0 2rpx 2rpx #cccccc;
		border-radius: 10rpx;
	}
	.i_step{
		margin-top: 30rpx ;
	}
	.i_say{
		width: 650rpx;
		margin: 30rpx 26rpx;
		border-top: 2rpx solid #cccccc;
		display: flex;
		justify-content: center;
	}
	.is_left,.is_right{
		margin-top: 30rpx;
	}
	.is_left{
		width: 100rpx;
		font-size: 24rpx;
		color: #999999;
		margin-right: 30rpx;
	}
	.is_right{
		width: 490rpx;
		font-size: 24rpx;
		color: #333333;
	}

	/* 安全保障 */
	.s_put{
		margin-top: 30rpx;
	}
	.stext_top{
		width: 702rpx;
		margin: 30rpx 24rpx;
		text-align: center;
		border: 2rpx solid #cccccc;
		box-shadow: 0 0 2rpx 2rpx #cccccc;
		border-radius: 10rpx;
		
	}
	.sttt_top{
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		
	}
	.stt_text{
		margin-top: 20rpx;
		font-size:24rpx ;
		color: #666666;
	}
	.sb_text{
		font-size: 24rpx;
		color: #333333;
		margin-top: 30rpx;
	}
	.stext_bottom{
		margin: 30rpx 26rpx;
		width: 650rpx;
		border-top: 2rpx solid #ccc;
		text-align: left;
	}
</style>
